<!--商品网站的模板-->
<template>
  <div class="home" id="home" name="home">
    <!-- 轮播图 -->
    <div class="block">
      <el-carousel height="460px" :autoplay="true">
        <el-carousel-item v-for="item in carousel" :key="item.carousel_id">
          <img style="height:460px;" :src="item.imgPath" :alt="item.describes"/>
        </el-carousel-item>
      </el-carousel>
    </div>
    <!-- 轮播图END -->

    <div class="main-box">
      <div class="main">
        <!-- 手机商品展示区域 -->
        <div class="phone">
          <div class="box-hd">
            <div class="title">手机</div>
          </div>
          <div class="box-bd">
            <div class="promo-list">
              <router-link to>
                <img :src="'http://106.15.179.105:3000/' +'public/imgs/phone/phone.png'"/>
              </router-link>
            </div>
            <div class="list">
              <MyList :list="phoneList" :isMore="true"></MyList>
            </div>
          </div>
        </div>
        <!-- 手机商品展示区域END -->

        <!-- 家电商品展示区域 -->
        <div class="appliance" id="promo-menu">
          <div class="box-hd">
            <div class="title">家电</div>
            <div class="more" id="more">
              <MyMenu :val="2" @fromChild="getChildMsg">
                <span>热门</span>
                <span>电视影音</span>
              </MyMenu>
            </div>
          </div>
          <div class="box-bd">
            <div class="promo-list">
              <ul>
                <li>
                  <img :src="'http://106.15.179.105:3000/' +'public/imgs/appliance/appliance-promo1.png'"/>
                </li>
                <li>
                  <img :src="'http://106.15.179.105:3000/' +'public/imgs/appliance/appliance-promo2.png'"/>
                </li>
              </ul>
            </div>
            <div class="list">
              <MyList :list="applianceList" :isMore="true"></MyList>
            </div>
          </div>
        </div>
        <!-- 家电商品展示区域END -->

        <!-- 配件商品展示区域 -->
        <div class="accessory" id="promo-menu">
          <div class="box-hd">
            <div class="title">配件</div>
            <div class="more" id="more">
              <MyMenu :val="3" @fromChild="getChildMsg2">
                <span>热门</span>
                <span>保护套</span>
                <span>充电器</span>
              </MyMenu>
            </div>
          </div>
          <div class="box-bd">
            <div class="promo-list">
              <ul>
                <li>
                  <img :src="'http://106.15.179.105:3000/' +'public/imgs/accessory/accessory-promo1.png'" alt/>
                </li>
                <li>
                  <img :src="'http://106.15.179.105:3000/' +'public/imgs/accessory/accessory-promo2.png'" alt/>
                </li>
              </ul>
            </div>
            <div class="list">
              <MyList :list="accessoryList" :isMore="true"></MyList>
            </div>
          </div>
        </div>
        <!-- 配件商品展示区域END -->
      </div>
    </div>
  </div>
</template>

<script>
  import carouselList from "@/data/1.json"
  import promoList from "@/data/2.json"
  import MyList from '@/components/MyList';

  export default {
    name: "HomePage",
    components:{
      MyList
    },
    data() {
      return {
        carousel: "", // 轮播图数据
        phoneList: "", // 手机商品列表
        miTvList: "", // 小米电视商品列表
        applianceList: "", // 家电商品列表
        applianceHotList: "", //热门家电商品列表
        accessoryList: "", //配件商品列表
        accessoryHotList: "", //热门配件商品列表
        protectingShellList: "", // 保护套商品列表
        chargerList: "", //充电器商品列表
        applianceActive: 1, // 家电当前选中的商品分类
        accessoryActive: 1 // 配件当前选中的商品分类
      }
    },
    created() {
      // 获取轮播图数据
      this.carousel = carouselList.carousel;
      // 获取各类商品数据
      this.phoneList = promoList.Product1;
      this.miTvList = promoList.Product2;
      this.protectingShellList = promoList.Product3;
      this.chargerList = promoList.Product4;
      this.applianceList = promoList.Product5;
      this.accessoryList = promoList.Product6;
    },
    methods: {
      // 获取家电模块子组件传过来的数据
      getChildMsg(val) {
        this.applianceActive = val;
      },
      // 获取配件模块子组件传过来的数据
      getChildMsg2(val) {
        this.accessoryActive = val;
      }
    }
  }
</script>

<style scoped>
</style>
